<template>
  <div class="Add">
    <div class="Add-box">
      <div class="Add-header">
        <p>添加诗歌</p>
      </div>
      <div class="Add-table">
        <el-form
          :label-position="labelPosition"
          label-width="80px"
          :model="formLabelAlign"
        >
          <el-form-item label="诗歌名字">
            <el-input v-model="formLabelAlign.name"></el-input>
          </el-form-item>
          <el-form-item label="作者">
            <el-input v-model="formLabelAlign.author"></el-input>
          </el-form-item>
          <el-form-item label="第一句">
            <el-input v-model="formLabelAlign.first"></el-input>
          </el-form-item>
          <el-form-item label="第二句">
            <el-input v-model="formLabelAlign.second"></el-input>
          </el-form-item>
          <el-form-item label="第三句">
            <el-input v-model="formLabelAlign.third"></el-input>
          </el-form-item>
          <el-form-item label="第四句">
            <el-input v-model="formLabelAlign.fourth"></el-input>
          </el-form-item>
          <el-form-item label="图片链接">
            <el-input v-model="formLabelAlign.img"></el-input>
          </el-form-item>
          <el-form-item label="描述">
            <el-input
              type="textarea"
              :autosize="{ minRows: 6, maxRows: 6 }"
              v-model="formLabelAlign.parsing"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="Add-choose">
        <div class="Add-choose-1">
          <el-button type="primary" @click="() => (choose = 1)"
            >TheThink</el-button
          >
          <i v-if="choose == 1" class="el-icon-success"></i>
        </div>

        <div class="Add-choose-2">
          <el-button type="primary" @click="() => (choose = 2)"
            >TheLook</el-button
          >
          <i v-if="choose == 2" class="el-icon-success"></i>
        </div>
        <div class="Add-choose-3">
          <el-button type="primary" @click="() => (choose = 3)"
            >TheWant</el-button
          >
          <i v-if="choose == 3" class="el-icon-success"></i>
        </div>
      </div>
      <!-- 按钮 -->
      <div class="Add-bt" @click="upload">
        <el-button type="primary">上传</el-button>
      </div>
    </div>
  </div>
</template>
 <script>
export default {
  data() {
    return {
      labelPosition: "left",
      //表格
      formLabelAlign: {
        name: "",
        author: "",
        first: "",
        second: "",
        third: "",
        fourth: "",
        img: "",
        parsing: "",
      },
      //选择
      choose: 0,
      // 检查结果
      results: 0,
    };
  },
  methods: {
    check() {
      let result = [];
      Object.keys(this.formLabelAlign).forEach((res) => {
        console.log(this.formLabelAlign[res]);
        result.push(this.formLabelAlign[res]);
      });
      this.results = result.indexOf("");
    },
    //上传
    upload() {
      this.check();
      let name = this.formLabelAlign.name;
      let author = this.formLabelAlign.author;
      let First = this.formLabelAlign.first.replace(/./g, function (i) {
        return i + " ";
      });
      let Second = this.formLabelAlign.second.replace(/./g, function (i) {
        return i + " ";
      });
      let Third = this.formLabelAlign.third.replace(/./g, function (i) {
        return i + " ";
      });
      let Fourth = this.formLabelAlign.fourth.replace(/./g, function (i) {
        return i + " ";
      });
      let Img = this.formLabelAlign.img;
      let Parsing = this.formLabelAlign.parsing;
      let url = "";
      let adress = "";
      console.log("First", First);
      if (this.choose == 1) {
        url = "theThink_add";
        adress = "所思";
      }
      if (this.choose == 2) {
        url = "theLook_add";
        adress = "所见";
      }
      if (this.choose == 3) {
        url = "theWant_add";
        adress = "所想";
      }
      if (this.results == -1 && this.choose != 0) {
        this.$swal.fire({
          icon: "question",
          title: `确认提交到${adress}嘛？`,
          showCloseButton: true,
          // 点击ok按钮的回调
          preConfirm: () => {
            // 发起请求
            this.$http
              .post(
                `/api/user/${url}`,
                {
                  name: name,
                  author: author,
                  First: First,
                  Second: Second,
                  Third: Third,
                  Fourth: Fourth,
                  Img: Img,
                  Parsing: Parsing,
                },
                {}
              )
              .then((res) => {
                console.log(res);
                this.$swal.fire({
                  icon: "success",
                  title: `提交成功！`,
                  showCloseButton: true,
                  preConfirm: () => {
                    this.formLabelAlign = {};
                    this.choose = 0;
                  },
                });
              });
          },
        });
      } else {
        this.$swal.fire({
          icon: "error",
          title: `请填写完整信息！`,
          showCloseButton: true,
          getCloseButton: () => {
            return false;
          },
        });
      }
    },
  },
};
</script>
 <style scoped>
@import "../css/add.css";
</style>